<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
html, body {
	width: 100%;
	padding: 0;
	margin: 0;
	text-align: center;
}

#addButton {
	font: Helvetica, sans-serif;
	font-size: 15px;
	margin-top: 50px;
	text-align: center;
}

button:hover {
	color: #7d7d7d;
	text-decoration: none;
}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
	function gotoPage(url) {
		var gotoPageNum = document.getElementById("gotoPageNum").value;
		/* alert(gotoPageNum);
		alert(url); */
		window.location.href = url + gotoPageNum;
	}
	
	$(function() {
        var $table = $(".user_table");
        var currentPage = 1;
        var pageSize = 10;
        var sumRows = $table.find("tbody tr").length;
        var sumPages = Math.ceil(sumRows/pageSize);
        
        init();
        paging(currentPage)
        
        $("#prev").click(function(){
            currentPage--;
            init();
            paging(currentPage);
        })
        
        $("#next").click(function(){
            currentPage++;
            init();
            paging(currentPage);
        })
        
        var $page = $("<div class='page'></div>");
        for(var pageIndex=1;pageIndex<=sumPages;pageIndex++){
            $("<a href='#'><span>["+(pageIndex)+"]</span></a>").bind("click",{"newPage":pageIndex},function(event){
                currentPage=event.data["newPage"];
                init();
                paging(currentPage);
            }).appendTo($page);
        }
        $page.insertAfter($table);
        
        function paging(currentPage){
            $table.find("tbody tr:not(.prevnext)").hide().slice((currentPage-1)*pageSize,(currentPage)*pageSize).show();
            $("#currentPage").val(currentPage+1);
            $("#currentPage").text(currentPage);
            $("#sumPages").text(sumPages);
        }
        
        function init(){
            if(currentPage==1){
                $("#prev").attr({"disabled":"disabled"});
            }else{
                $("#prev").removeAttr("disabled");
            }
            if(currentPage==sumPages){
                $("#next").attr({"disabled":"disabled"});
            }else{
                $("#next").removeAttr("disabled");
            }
        }
        $("#search").click(function(){
            var userName = $("#userName").val();
              if(userName==""){
                $("#msg").text("未输入检索条件!");
                return;
            }
            $("#form0").submit();
        });
        
    })
</script>
<title>用户列表</title>
</head>
<body>
	<%
		//获取分页信息
	%>
	<h2>用户列表</h2>
	<br>
	<br>
	<br>
	<br>
	<form id="form0" action="<%=request.getContextPath()%>/user/userList.do"
		method="post">
		姓名：<input type="text" id="userName" name="userName"> 
			  <input type="button" id = "search" value="查询">
		<span id="msg" style="color:red;"></span>
		<table class="user_table" align="center" border="1px" width="500px">
			<thead>
				<tr>
					<td>用户ID</td>
					<td>姓名</td>
					<td>年龄</td>
					<td>操作</td>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${users}" var="user">
					<tr>
						<td>${user.id}</td>
						<td>${user.name}</td>
						<td>${user.age}</td>
						<td><a
							href="<%=request.getContextPath() %>/user/userAdd.do?userId=${user.id}">修改</a>
							<a
							href="<%=request.getContextPath() %>/user/userDelete.do?userId=${user.id}">删除</a></td>
					</tr>
				</c:forEach>
				<tr class="prevnext">
                    <td>
                        <input id="prev" type="button" value="上一页">
                    </td>
                    <td>当前<label id="currentPage"></label>页/共<label id="sumPages"></label>页</td>
                    <td>
                        <input id="next" type="button" value="下一页">
                    </td>
                </tr>
			</tbody>
		</table>
		<%-- <div class="pagenation">
			<c:if test="${currentPageNum != null && currentPageNum > 1}">
				<a
					href="<%=request.getContextPath() %>/user/userList.do?pageNum=${currentPageNum-1}">上一页</a>&nbsp;&nbsp;
		</c:if>
			<c:if test="${currentPageNum<totalPageNum}">
				<a
					href="<%=request.getContextPath() %>/user/userList.do?pageNum=${currentPageNum + 1}">下一页</a>&nbsp;&nbsp;
		</c:if> --%>
		 <input id="currentPage" type="hidden" name="currentPage" value="${currentPageNum}">
			共：<input type="text" size=5 id="totalPageNum" name="totalPageNum"
				readonly="readonly" value="${totalPageNum}">页&nbsp;&nbsp;
			跳转到：<input type="text" size=5 id="gotoPageNum" name="gotoPageNum"
				value="${currentPageNum}">页&nbsp;&nbsp;

			<button id="gotoButton"
				onclick="gotoPage('<%=request.getContextPath()%>/user/userList.do?pageNum=')">确定</button>
		</div>
	</form>
	<button id="addButton"
		onclick="location='<%=request.getContextPath()%>/user/userAdd.do'">新增</button>
</body>
</html>